<template>
  <div class="qrCode-wrap">
    <div class="iframe-wrap">
      <div v-if="!loading" class="handle-wrap">
        <div v-if="!appid" class="err-wrap">
          <svg-icon icon-class="no-signal" />
          <p>网络加载失败</p>
          <el-button
            type="primary"
            size="small"
            class="refresh-btn"
            @click="refresh"
          >
            刷新试试
          </el-button>
        </div>
        <div v-else>
          <iframe
            sandbox="allow-scripts allow-top-navigation allow-same-origin"
            scrolling="no"
            :width="width"
            frameBorder="0"
            allowTransparency="true"
            :src="setSrc"
            style="vertical-align: middle"
          />
        </div>
      </div>
      <div v-loading="loading" class="loading" v-else />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "QrcodeWxLogin",
  props: {
    loading: Boolean,

    // 应用唯一标识，在微信开放平台提交应用审核通过后获得
    appid: {
      type: String,
      default: ""
    },
    // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
    scope: {
      type: String,
      default: "snsapi_login"
    },
    // 重定向地址，需要进行UrlEncode
    redirectUri: {
      type: String,
      default: ""
    },
    // 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
    state: {
      type: String,
      default: ""
    },
    // 提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
    theme: {
      type: String,
      default: "black"
    },
    // 自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
    href: {
      type: String,
      default: ""
    },
    // true：手机点击确认登录后可以在 iframe 内跳转到 redirectUri，false：手机点击确认登录后可以在 top window 跳转到 redirectUri。默认为 false。
    selfRedirect: {
      type: String,
      default: 'false'
    },
    // sdk的扩展字符串，但是在这里就默认了jssdk，暂时不建议修改
    loginType: {
      type: String,
      default: "jssdk"
    },
    // iframe 宽
    width: {
      type: String,
      default: "100%"
    },
    // iframe 高
    height: {
      type: String,
      default: "263px"
    },
    timestamp: {
      type: Number,
      default: 0
    }
  },
  emits: ["refresh"],
  data() {
    return {};
  },
  computed: {
    setSrc() {
      return (
        "https://open.weixin.qq.com/connect/qrconnect?appid=" +
        this.appid +
        "&scope=" +
        this.scope +
        "&redirect_uri=" +
        this.redirectUri +
        "&state=" +
        this.state +
        "&login_type=" +
        this.loginType +
        "&style=" +
        this.theme +
        "&self_redirect=" +
        this.selfRedirect +
        "&href=" +
        this.href +
        "&timestamp=" +
        this.timestamp
      );
    }
  },
  methods: {
    refresh() {
      this.$emit("refresh");
    }
  }
};
</script>
<style lang="scss" scoped>
.qrCode-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.iframe-wrap {
  position: relative;
  height: 100%;
  z-index: 2;
}

.handle-wrap {
  position: relative;
  height: 100%;
  :deep(.el-loading-spinner .circular) {
    width: 30px;
    height: 30px;
  }
  :deep(.el-loading-mask) {
    border-radius: 6px;
    background: #f3f5f6;
  }
}
.wx-wrap {
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.err-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 12px;
  color: #999999;
  background: #f3f5f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 6px;
  .svg-icon {
    font-size: 64px;
    margin-bottom: 10px;
  }
  .refresh-btn {
    margin-top: 10px;
  }
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
